<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动面板</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 200px;
        }
        .tittle{
            text-align: center;
            width:auto;
            height: 60px;
            background-color: black;
            color: white;
        }
        .content{
            width: auto;
            height: 140px;
            background-color: pink;
            color: #333333;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="tittle">标题</div>
    <div class="content">内容</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    
    $(".box").mousemove(function () {
        $(this).css("cursor",'pointer')
    }).mousedown(function (e) {
        var eve=e ||window.event;
        // 原始鼠标纵坐标位置
        var old_n_x=eve.clientX;
        var old_n_y=eve.clientY;
        console.log(old_n_x);
        console.log(old_n_y);

        var old_box_x = $(this).parent().offset().top;
        var old_box_y = $(this).parent().offset().left;

    $(this).bind("mousemove",function (eve) {
        var  new_n_x=eve.clientX;
        var  new_n_y=eve.clientY;

        var n_x = new_n_x - old_n_x;
        var n_y = new_n_y - old_n_y;

        var x = old_box_x + n_x;
        var y = old_box_y + n_y;

        $(this).parent().css("left",x+"px");
        $(this).parent().css('top',y+"px");
    })
    }).mouseout(function () {
        $(this).unbind("mousemove")
    })
   
</script>
</body>
</html>